<template>
	<view>
		<view class="searchbar">
			<uni-search-bar
				autoFocus="true"
				radius="18" 
				cancelButton="none"
				placeholder="搜索"
				@confirm="onSearch"
				@input="onInput"
			></uni-search-bar>
		</view>
		<view v-if="keyword == ''">
			<view class="searchTitle">
				<text>搜索历史</text>
				<uni-icons type="trash" size="12" @click="onDelete"></uni-icons>
			</view>
			<view class="searchTagList">
				<uni-tag class="searchTag" v-for="(item, i) in histories" :key="i" size="small" :text="item" :style="{display: 'inline-block'}" @click="clickTag()"></uni-tag>
			</view>
		</view>
		<scroll-view scroll-y :style="{height: (windowHeight - 50) + 'px'}" v-if="keyword != ''">
			<view class="keyword" v-for="(item, i) in searchKeywords" :key="i" @click="clickKeyword(item)">
				<view class="text">{{item.goods_name}}</view>
				<uni-icons class="icon" type="arrowright" size="12"></uni-icons>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	
	import { $http } from '@escook/request-miniprogram';
	
	export default {
		data() {
			return {
				keyword: '',
				windowHeight: 0,
				searchKeywords: [],
				historyList: []
			};
		},
		computed: {
			histories: function() {
				return this.historyList.slice().reverse();
			}
		},
		onShow: function() {
			const { windowHeight } = uni.getSystemInfoSync();
			this.windowHeight = windowHeight;
		},
		methods: {
			onLoad: function() {
				this.historyList = JSON.parse(uni.getStorageSync("kw") || '[]');
			},
			onSearch: function(e) {
				uni.showToast({
					title: e.value
				});
			},
			onInput: function(e) {
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.keyword = e.value;
					this.getSearchData(e.value);
				}, 500);
			},
			addToHistory: function(keyword) {
				const set = new Set(this.historyList);
				set.delete(keyword);
				set.add(keyword); 
				this.historyList = Array.from(set).slice(-10);
				uni.setStorageSync("kw", JSON.stringify(this.historyList));
			},
			getSearchData: async function(k) {
				if (k.trim() === '') {
					return this.searchKeywords = [];
				}
				this.addToHistory(k);
				const {data: res} = await $http.get('/goods/qsearch?query=' + k);
				if (!res || res.meta.status !== 200) {
					return uni.$baseShowMsg();
				}
				this.searchKeywords = res.message;
			},
			clickKeyword: function(item) {
				uni.navigateTo({
					url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
				});
			},
			onDelete: function() {
				uni.showModal({
				    title: '确认',
				    content: '确认清空搜索历史吗？',
				    success:  (res) => {
				        if (res.confirm) {
									this.historyList = [];
									uni.setStorageSync("kw", JSON.stringify(this.historyList));
								} 
				    }
				});
			},
			clickTag: function(tag) {
				uni.navigateTo({
					url: '/subpkg/goods_list/goods_list?query=' + tag
				});
			}
		}
	}
</script>

<style lang="scss">
.searchbar {
	height: 50px;
	box-sizing: border-box;
	background-color: #c00000;
}
.searchbar .uni-searchbar {
	background-color: transparent !important;
}
.text {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.keyword {
	margin: 0 10px;
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.icon {
	margin-left: 10px;
}
.searchTitle {
	display: flex;
	justify-content: space-between;
	margin: 0 10px 2px 10px;
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
	font-size: 12px !important;
}
.searchTagList {
	padding-left: 8px;
}
.searchTag {
	margin: 0 3px 0 0;
	padding: 5px 3px;
	font-size: 14px;
	borde-raidus: 3px;
	color: #0a0a0a;
}
</style>
